<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>餐厅点餐系统 - 项目预览</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        
        .header {
            background: linear-gradient(135deg, #ff6b6b, #ee5a24);
            color: white;
            padding: 40px;
            text-align: center;
        }
        
        .header h1 {
            font-size: 3em;
            margin-bottom: 10px;
            font-weight: 700;
        }
        
        .header p {
            font-size: 1.2em;
            opacity: 0.9;
        }
        
        .content {
            padding: 40px;
        }
        
        .section {
            margin-bottom: 40px;
        }
        
        .section-title {
            font-size: 2em;
            color: #333;
            margin-bottom: 20px;
            border-left: 5px solid #ff6b6b;
            padding-left: 15px;
        }
        
        .features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-bottom: 40px;
        }
        
        .feature-card {
            background: #f8f9fa;
            padding: 30px;
            border-radius: 15px;
            text-align: center;
            transition: transform 0.3s ease;
        }
        
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        
        .feature-icon {
            font-size: 3em;
            margin-bottom: 15px;
            display: block;
        }
        
        .feature-title {
            font-size: 1.5em;
            color: #333;
            margin-bottom: 10px;
            font-weight: 600;
        }
        
        .feature-desc {
            color: #666;
            line-height: 1.6;
        }
        
        .tech-stack {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
        }
        
        .tech-item {
            background: #e9ecef;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            font-weight: 600;
            color: #495057;
        }
        
        .project-structure {
            background: #2b2d42;
            color: white;
            padding: 30px;
            border-radius: 15px;
            font-family: 'Monaco', 'Menlo', monospace;
            font-size: 14px;
            line-height: 1.6;
        }
        
        .file-item {
            padding: 5px 0;
            border-bottom: 1px solid #4a4e69;
        }
        
        .file-item:last-child {
            border-bottom: none;
        }
        
        .folder {
            color: #74c0fc;
            font-weight: 600;
        }
        
        .file {
            color: #c8b6ff;
        }
        
        .actions {
            text-align: center;
            margin-top: 40px;
        }
        
        .btn {
            display: inline-block;
            padding: 15px 30px;
            background: #ff6b6b;
            color: white;
            text-decoration: none;
            border-radius: 30px;
            font-weight: 600;
            margin: 0 10px;
            transition: all 0.3s ease;
        }
        
        .btn:hover {
            background: #ee5a24;
            transform: translateY(-2px);
        }
        
        .btn-secondary {
            background: #6c757d;
        }
        
        .btn-secondary:hover {
            background: #5a6268;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🍽️ 美味餐厅点餐系统</h1>
            <p>基于 UniApp + PHP 的现代化餐厅点餐解决方案</p>
        </div>
        
        <div class="content">
            <div class="section">
                <h2 class="section-title">项目特性</h2>
                <div class="features">
                    <div class="feature-card">
                        <span class="feature-icon">📱</span>
                        <h3 class="feature-title">多端兼容</h3>
                        <p class="feature-desc">支持微信小程序、H5、App等多端运行，一套代码多端部署</p>
                    </div>
                    
                    <div class="feature-card">
                        <span class="feature-icon">🛒</span>
                        <h3 class="feature-title">智能点餐</h3>
                        <p class="feature-desc">完整的购物车功能，支持菜品分类、搜索、收藏等操作</p>
                    </div>
                    
                    <div class="feature-card">
                        <span class="feature-icon">💰</span>
                        <h3 class="feature-title">在线支付</h3>
                        <p class="feature-desc">集成多种支付方式，支持微信支付、支付宝等主流支付渠道</p>
                    </div>
                    
                    <div class="feature-card">
                        <span class="feature-icon">📊</span>
                        <h3 class="feature-title">订单管理</h3>
                        <p class="feature-desc">完整的订单生命周期管理，从下单到完成全流程跟踪</p>
                    </div>
                    
                    <div class="feature-card">
                        <span class="feature-icon">👨‍💼</span>
                        <h3 class="feature-title">后台管理</h3>
                        <p class="feature-desc">强大的后台管理系统，支持菜品管理、订单统计、用户管理等</p>
                    </div>
                    
                    <div class="feature-card">
                        <span class="feature-icon">⚡</span>
                        <h3 class="feature-title">高性能</h3>
                        <p class="feature-desc">基于Vue.js的响应式架构，确保流畅的用户体验</p>
                    </div>
                </div>
            </div>
            
            <div class="section">
                <h2 class="section-title">技术栈</h2>
                <div class="tech-stack">
                    <div class="tech-item">UniApp 跨端框架</div>
                    <div class="tech-item">Vue.js 2.x</div>
                    <div class="tech-item">Vuex 状态管理</div>
                    <div class="tech-item">PHP 7.4+</div>
                    <div class="tech-item">MySQL 数据库</div>
                    <div class="tech-item">RESTful API</div>
                </div>
            </div>
            
            <div class="section">
                <h2 class="section-title">项目结构</h2>
                <div class="project-structure">
                    <div class="file-item"><span class="folder">📁 api/</span> - PHP后端API</div>
                    <div class="file-item">&nbsp; └── <span class="folder">📁 config/</span> - 配置文件</div>
                    <div class="file-item">&nbsp; └── <span class="folder">📁 controllers/</span> - 控制器</div>
                    <div class="file-item">&nbsp; └── <span class="folder">📁 models/</span> - 数据模型</div>
                    <div class="file-item">&nbsp; └── <span class="folder">📁 utils/</span> - 工具类</div>
                    
                    <div class="file-item"><span class="folder">📁 pages/</span> - UniApp页面</div>
                    <div class="file-item">&nbsp; └── <span class="file">📄 index/</span> - 首页</div>
                    <div class="file-item">&nbsp; └── <span class="file">📄 menu/</span> - 菜单页</div>
                    <div class="file-item">&nbsp; └── <span class="file">📄 cart/</span> - 购物车</div>
                    <div class="file-item">&nbsp; └── <span class="file">📄 orders/</span> - 订单页</div>
                    <div class="file-item">&nbsp; └── <span class="file">📄 profile/</span> - 个人中心</div>
                    
                    <div class="file-item"><span class="folder">📁 static/</span> - 静态资源</div>
                    <div class="file-item"><span class="folder">📁 store/</span> - Vuex状态管理</div>
                    <div class="file-item"><span class="file">📄 App.vue</span> - 应用入口</div>
                    <div class="file-item"><span class="file">📄 manifest.json</span> - 应用配置</div>
                    <div class="file-item"><span class="file">📄 pages.json</span> - 页面配置</div>
                    <div class="file-item"><span class="file">📄 package.json</span> - 项目依赖</div>
                </div>
            </div>
            
            <div class="actions">
                <a href="http://localhost:8000" class="btn">🚀 启动应用</a>
                <a href="#" class="btn btn-secondary">📖 查看文档</a>
            </div>
        </div>
    </div>
</body>
</html>